<template>
	<view class="page-body" :class="{'page-white':listItems[tabindex].listData.length==0}">
		<!-- filter-frame  -->
		<view class="filter-frame fixed" v-show="isOpen">
			<view class="mask" @click="closefilter"></view>
			<view class="cont" >
				<view class="wrap">
					<view class="fliter-line" v-for="(item,index) in filterArr" :key="index" @click="filter" :data-id="item.id">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<view class="banner-body">
				<view class="p">佣金余额</view>
				<view class="h2">{{lendAsset}}</view>
				<!-- <view class="flex block">
					<view class="block-1 " >
						<view class="p">待收积分+红包</view>
						<view class="h3">{{lendAsset.waitProfit}}</view>
					</view>
					<view class="block-2">
						<view class="p">累计回报</view>
						<view class="h3">{{lendAsset.totalProfit}}</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="tabbar sticky">
			<tab-bar :tabbarArr="TabbarArr"  
			@click-tabitem="bindtabbar" 
			ClassName="tab_pro2"
			fixed="false"
			ref="tabBar"  :tabIndex="tabindex"></tab-bar>
		</view>
		<!-- 列表 -->
		<view class="list" @touchstart="proTouchstart"
					@touchmove="proTouchmove"
					@touchend="proTouchend">
				<view v-for="(tab,index1) in listItems" :key="index1" :class="['tabItem',index1==tabindex?'fadein':'fadeout']">
					<view class="list-item" v-for="(item, idx) in tab.listData" :key="idx"  @click="toinvestDes" :data-id="item.oid">
					<!-- 	<view class="flex head">
							<view class="h4">提现</view>
							<view class="p">结算日{{item.repaymentLastTime}}</view>
						</view> -->
						<view class="flex cont">
							<view class="left">
								<view class="h5">提现</view>
								<view class="p">2019-10-25 11：11：10</view>
							</view>
							<view class="right">
								<view class="h5">-100.1</view>
								<view class="p">余额：0.00</view>
							</view>
						</view>
					</view>
					<load-more :listnull="tab.listnull" :loadtype="tab.loadtype" :text2="tab.text2" ref="loadmore">
						<block slot="null">
							<view style="padding-top:200upx">
								<defalut :type="hasNetwork?9:15" :text="hasNetwork?defalutText:defalutText2"></defalut>
								<!-- <view class="button" @click="gotoInvest" v-if="hasNetwork"></view> -->
							</view>
						</block>
					</load-more>
				</view>
		</view>
	</view>
</template>

<script>
	var that;
	var bannerTop="";
	let startX, moveX,startY,moveY;
	var startTime = "";
	var scrollTimer = false;
	var sin;
	import {
	    mapState
	} from 'vuex'
	import tabBar from '@/components/tab-bar.vue';
	import defalut from '@/components/defalut.vue';
	import {ApiUrl} from '@/utils/Config'
	import {pageLoad} from '@/utils/request.js';
	import loadMore from '@/components/load-more.vue';
	var filterArr=[
		{
			id:0,
			name:"全部"
		},{
			id:1,
			name:"本月"
		},{
			id:2,
			name:"近一月"
		},{
			id:3,
			name:"近三月"
		},{
			id:4,
			name:"近一年"
		},
	]
	export default{
		data(){
			return{
				lendAsset:"0000",
				TabbarArr:[
					{
						code:"1",
						id:"0",
						name:"获得"
					},
					{
						code:"2",
						id:"1",
						name:"提现"
					}
				],
				defalutText:"暂无已完成出借记录",
				defalutText2:"暂无网络",
				filterArr:filterArr,
				isOpen:false,
				// tabid:1,
				tabindex:0,
				showLength:6,
				navHeight:"",
				fromPage:"",
				isFixed:false,
				listItems:[{
					listData : [],loadtype : 0 ,//加载更多 0加载前，1加载中，2没有更多了
					refreshing : 0,listnull:false,listLen:4,page:1,	text2:"",
				}],
				pageDeviation: 0, 
				bodyHeight:500,
				timeid:0,
				isStop:false
			}
		},
		computed:mapState({
			i18n(){
				return this.$t('login')
			},
			hasNetwork(state){
				return state.isConnected;
			}
		}),
		methods:{
			bindtabbar(e){
				this.tabid=e.code;
				// this.tabindex=e.index;
				// this.orderRecordMore()
				this.changelist(e.index)
			},
			getlendAsset(){
				this.$https.POST({
					url:'/users/lendAsset',
					data:{
					},
					success(res){
						that.lendAsset=res.data
					},
					failFresh(res){
					}
				})
			},
			orderRecord(isReload,timeid=0){
				pageLoad({
					url:"/users/orderRecord",
					that: that,
					isReload: isReload,
					data:{
						status:that.tabid,
						select_time:timeid
					},
					before(res){
						// let result=res.data;
					},
					success(res){
						// console.log(res,'res getProductAct')
					},
					failFresh(res){
						
					}
				})
			},
			filter(e){
				let filterid=e.currentTarget.dataset.id;
				this.timeid=filterid
				this.orderRecordMore(true)
				this.closefilter()
			},
			openfilter(){
				this.isOpen=true
			},
			closefilter(){
				this.isOpen=false
			},
			toinvestDes(e){
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url:`/pages/user/order/investdetail?id=${id}`
				})
			},
			gotoInvest(){
				uni.switchTab({
					url:"/pages/index/product"
				})
			},
			getElSize(ele) { //得到元素的size
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("." + ele).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			getTabArr(){
				let list =this.TabbarArr
				list.forEach(item=>{
					item.listData = [];
					item.loadtype = 0;  //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.listnull=false;
					item.listLen=4;
					item.page=1;
					item.text2=""
				})
				that.listItems=list;
			},
			orderRecordMore(isReload){
				let timeid=this.timeid
				let tabindex=this.tabindex;
				let list=this.listItems[tabindex];
				if(isReload){
					list.listData=[];
					list.loadtype=0;
					list.listnull=false;
					list.page=1;
					that.$set(that.listItems,tabindex,list)
				}
				if (list.loadtype==2||list.loadtype==1) { return; }
				this.$https.POST({
					url:"/users/orderRecord",
					data:{
						status:list.code,
						select_time:timeid,
						page:list.page
					},
					success(res){
						list.loadtype=1;
						let nowlistData=list.listData;
						let listData=nowlistData.concat(res.data)
						list.listData=listData;
						list.listData.forEach((item,index)=>{
							item.photo=that.$imgurl+item.photo
						})
						++list.page
						if(list.listData.length==0&&res.data.length==0){
							list.listnull=true
						}
						if(list.listData.length>0&&res.data.length<10){
							if(list.listData.length<=list.listLen){
								list.text2=" ";
							}
							list.loadtype=2;
						   that.$set(that.listItems,tabindex,list);
						   return;
						}
						that.$set(that.listItems,tabindex,list)
						list.loadtype=0;
					}
				})
			},
			changelist(index){
				let list=this.listItems[index];
				// that.tabcode=list.code;
				this.tabindex=index;
				if(scrollTimer){//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				scrollTimer = setTimeout(()=>{
					if(this.tabIndex!==0&&list.loaded!==true)
					this.orderRecordMore()
					list.loaded=true
				},300)
			},
			changTabtoleft(){
				let index=this.tabindex;
				if(index==0)return;
				index--;
				this.changelist(index)
			},
			changTabtoright(){
				let index=this.tabindex;
				if(index==this.TabbarArr.length-1)return;
				index++;
				this.changelist(index)
			},
			proTouchstart(e){
				if(e.touches.length>1){
					this.isStop = true;
					return ;
				}
				startX = e.touches[0].pageX;
				startY = e.touches[0].pageY;
				startTime = e.timeStamp;
				sin=0;
			},
			proTouchmove(e){
				if(e.touches.length>1){
					this.isStop = true;
					return ;
				}
				moveX = (e.touches[0].pageX - startX) ;
				moveY = e.touches[0].pageY - startY;
			},
			proTouchend(e){
				if(Math.abs(moveY)!=0){
					sin=Math.abs(moveY)/Math.sqrt(Math.abs(moveX)*Math.abs(moveX)+Math.abs(moveY)*Math.abs(moveY));
				}
				let movedTime = e.timeStamp - startTime;
				if(movedTime > 50 && movedTime < 300 && moveX >= 80 && sin < 0.4 && Math.abs(moveY) < 30){
					this.changTabtoleft()
				}else if(movedTime > 50 && movedTime < 300 && moveX < -80 && sin < 0.4 && Math.abs(moveY) < 30){
					this.changTabtoright()
				}
				else{
				}
				startX = moveX = 0;
				this.isStop=false
			},
		},
		onLoad(options){
			that=this;
			that.fromPage=options.frompage;
			// this.orderRecord(true)
			this.getTabArr()
			this.orderRecordMore(true)
			this.getlendAsset()
			// 获取头部高度
			let statuebarHeight=uni.getSystemInfoSync().statusBarHeight;
			// that.navHeight=statuebarHeight+50+'px'
		},
		async onReady() {
			let banner=await this.getElSize('banner');	
			bannerTop=banner.height;
			
		},
		async onPageScroll(e){
			// if(this.isSupport_sticky)return;
			if(e.scrollTop>=bannerTop){//滚动高度>=新手标高度
				if(that.isFixed==true)return;
				that.isFixed=true;
			}else{
				if(that.isFixed==false)return
				that.isFixed=false
			}
		},
		onReachBottom(){
			this.orderRecordMore()
		},
		components:{
			tabBar,
			defalut,
			loadMore,
		},
		onNavigationBarButtonTap(){
			this.openfilter()
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {  
		        return false;  
		    }  
			if(this.fromPage=='success'){
				uni.switchTab({
					url:"/pages/index/user"
				})
			}else{
				uni.navigateBack({
					delta:1
				})
			}
			return true;
		},
		watch:{
			hasNetwork(newValue,oldValue){
				if(newValue){
					this.orderRecord(true)
					this.getlendAsset()
				}
			}
		}
	}
</script>

<style lang="scss" scoped="">
	.page-body{
		background: #f7f6f8;
	}
	.sticky{
		position: sticky;position: -webkit-sticky;z-index: 5;
		top:0;
		/* #ifdef H5 */
		top:44px;
		/* #endif */
	}
	.banner{
		background: #fff;padding:10upx 20upx 35upx; text-align: center;
		.banner-body{	width: 670upx;height: 180upx;background:linear-gradient( 45deg, rgb(255,98,0) 1%, rgb(255,114,15) 55%, rgb(255,146,44) 100%); border-radius: 10upx 10upx 0 0; color: #fff;margin: 0 auto;padding-top:40upx ;}
		.h2{font-size: 60upx;}
		.p{font-size: 24upx;opacity: .7;}
		.block{margin-top:30upx;}
		.block-1{text-align: right;padding-right: 30upx;width: 50%;position: relative;}
		.block-1::after{
			content: "";
			display: block;
			width: 1px; height: 60upx;background: #fff;
			position: absolute; right: 0;top: 8upx;opacity: .7;
		}
		.block-2{text-align: left;padding-left: 30upx;width: 50%;}
		.h3{font-size: 36upx;;line-height: 46upx;}
	}
	.tabbar{
		 background: #fff;
		border-bottom: 1px solid #f7f6f8;height: 50px;
	}
	.list{position: relative;}
	.list-item{
			padding:20upx 30upx;background: #fff;
			margin-bottom: 20upx; color: #101933;
			.p{font-size:24upx; ;color: #b7becb;}
			.head{
				justify-content: space-between; height: 56upx; align-items: center;
				padding-left:10upx;
				.h4{font-size: 28upx;}
			}
			.cont{
				justify-content: space-between; padding:10upx 0; 
				.h5{font-size: 30upx;line-height: 46upx;}
				.left,.right{text-align: center;}
				.p{margin-left:20upx; }
			}
	}
	.filter-frame{
		position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index:6;
		.cont{
			width: 188upx;background: #fff;position: absolute; right: 36upx;z-index: 10;
			/* #ifdef APP-PLUS */
			top: 20upx;
			/* #endif */
			/* #ifdef H5 */
			top: 120upx;
			/* #endif */
		}
		.wrap{padding:0 15upx;}
		.cont::after{
			content: "";
			display: block;
			width: 0;height: 0;
			border:18upx solid transparent;
			border-bottom-color: #fff;
			position: absolute;right: 8upx; top: -28upx; 
		}
		.fliter-line{line-height: 78upx;height: 80upx;border-bottom: 1px solid #eeeeee;color: #666d83;text-align: center;}
	}
	.button{
		height: 70upx;width: 360upx;background: linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);line-height: 70upx;margin: 40upx auto 0;
	}
	.tabItem{position: absolute;width: 100%; transition: opacity .3s linear;overflow: hidden;}
	.tabItem.fadein{opacity: 1;z-index: 3;height: auto;}
	.tabItem.fadeout{opacity: 0;z-index: 0;height: 0;}
</style>

